<template>
    <div id="shou">
        <div class="page-body">
            <div id="box">
                <img id="box-img" src="static/img/chawo-logo.png">
                <input type="text">
            </div>

            <div id="lunbo">
                <Swiper id="lunbo" :list="list" :auto="true" :loop="true"> </Swiper>
            </div>

            <div id="ten">
                <router-link to="" v-for="t in ten" :key="t.img">
                    <div class="item">
                        <img :src="t.img">
                        <p>{{t.title}}</p>
                    </div>
                </router-link>
            </div>

            <div id="trotting">
                <img id="toutiao" src="static/img/toutiao.jpg">
                <marquee scrollAmount=2 height="55" width="150" direction behavior>新品上市，价格优惠</marquee>
            </div>

            <div class="name">
                <span>普洱生茶</span>
            </div>

                   <div id="top"> 
                <div id="top-box">
                     <span class="fa fa-hand-o-up" id="outer"></span>
                </div>
                
            </div>
            <ul class="goods-list">
                <li>
                    <router-link to="">
                        <div class="goods-pic">
                            <img src="http://www.chawo.com/data/upload/shop/store/goods/2/2017/10/2_05614799384163068_360.jpg">
                        </div>

                        <div class="goods-info">
                            <p class="goods-name">2017年下关 四号饼茶（泡饼）生茶 400克/饼</p>
                            <p class="goods-price">￥75.00</p>
                        </div>
                    </router-link>
                </li>
                <li>
                    <router-link to="">
                        <div class="goods-pic">
                            <img src="http://www.chawo.com/data/upload/shop/store/goods/2/2017/04/2_05467395240597043_360.jpg">
                        </div>

                        <div class="goods-info">
                            <p class="goods-name">2017年大益 凰后版 7542 1701批次 生茶 375克/饼</p>
                            <p class="goods-price">￥159.00</p>
                        </div>
                    </router-link>
                </li>
            </ul>

         

             <div class="name">
                <span>普洱熟茶</span>
            </div>

               <ul class="goods-list">
                <li>
                    <router-link to="">
                        <div class="goods-pic">
                            <img src="http://www.chawo.com/data/upload/shop/store/goods/2/2017/09/2_05597505639224414_360.jpg">
                        </div>

                        <div class="goods-info">
                            <p class="goods-name">2017年大益 v93 1701批  次熟茶 100克/包</p>
                            <p class="goods-price">￥14.00</p>
                        </div>
                    </router-link>
                </li>
                <li>
                    <router-link to="">
                        <div class="goods-pic">
                            <img src="http://www.chawo.com/data/upload/shop/store/goods/2/2017/08/2_05550106495439470_360.jpg">
                        </div>

                        <div class="goods-info">
                            <p class="goods-name">2017年下关 经典甘普洱（铁饼）熟茶 100克/盒</p>
                            <p class="goods-price">￥25.00</p>
                        </div>
                    </router-link>
                </li>
            </ul>
            
           
           
            <Bottombar></Bottombar>
        </div>

    </div>
</template>

<script>
    import { Swiper } from "vux"
    import { mapState, mapActions } from "vuex"
    import Bottombar from '../components/Bottombar.vue'
    export default {
        data: function () {
            return {

            }
        },
        components: {
            Swiper,
            Bottombar
        },
        computed: {
            ...mapState([
                "list",
                "ten",
            ])
        },
        mounted: function () {
            this.$store.dispatch("requestList");
            this.$store.dispatch("requestTen");
        }
    }



       var outer = document.getElementById("outer");
       window.onscroll = function(){
        if( document.documentElement.scrollTop>50){
             outer.style.display = "inline"; 
             }else{
           outer.style.display = "none";} 
       }
</script>

<style scoped>
    
      #box {
        position: fixed;
        z-index: 10;
        margin-top: 5px;
        width: 100%
    }
    #box-img {
        width: 47px;
        height: 19px;
        position: relative;
        top: 5px;
    }

    #box input {
        width: 70%;
        height: 25px;
        /*background-color: rgba(255, 255, 255, 0.8);*/
        border: none;
        border-radius: 5px;
    }

    #ten {
        display: flex;
        flex-wrap: wrap;
    
        
      
    }

    a {
        display: inline-block;
        width: 20%;
        text-decoration: none;
    }

    .item {
        margin-top: 5px;
        width: 100%;
        text-align: center;
       
    }

    .item img {
        border-radius: 50%;
        width: 44px;
        height: 44px;
    }

    .item p {
        margin: 0;
        font-size: 13px;
        color: #888888;
    }

    #trotting {
        /*border: solid 1px black;*/
        border-top: solid 1px #cccccc;
        margin-top: 5px;
        overflow: hidden;
        /*width: 100%;*/
        margin-left: 5px;
        height: 55px;
    }

    marquee {
        display: inline-block;
        line-height: 55px;
        margin-left: 10px;
    }

    #toutiao {
        width: 54px;
        height: 54px;
    }

    .name {
        background-color: #F0F0F0;
        height: 50px;
        line-height: 50px;
        margin-left: 5px;
    }

    .goods-list {
        margin: 0;
        padding: 0;
        display: flex;
        list-style: none;
        margin-left: 5px;
    }

    .goods-info p{
        margin: 0;
        height: 75px;
       
    }

    .goods-pic img {
        width: 172px;
        height: 172px;
    }

    .goods-name{
        width: 163px;
        height: 35px;
         color: black;
    }

    .goods-price{
        color:red;
    }

    #top{
      position: fixed;
      z-index: 10;
    }
    #top-box{
       border: solid 1px black;
        width: 25px;
        height: 25px;
        background-color: rgba(255, 255, 255, 0.4);
          border-radius: 15px;
        text-align: center;
        cursor: pointer;
         margin-left: 315px;
         margin-top: 100px;
         
    }
</style>